<!-- 卡片页 -->
<template>
  <view class="list-all">
    <uv-swipe-action>
      <uv-swipe-action-item :options="swipeOptions" @tap="handleSwipe" :disabled="swipeDisabled">
        <view class="main-list" @tap="handleCard">
          <!-- 顶部提示 -->
          <view v-if="topTip" class="s-top-warn">
            <image src="@/static/image/s-top-warn.png"></image>
            {{ topTip }}
          </view>
          <!-- 三角状态 -->
          <view v-if="deltaState" class="full-width">
            <view class="state-main">
              <view class="state" :class="getBackgroundClass(deltaStateColor)"></view>
              <view class='state-text'>{{ deltaState }}</view>
            </view>
          </view>
          <view class="list-all-main" :style="{margin: topTip ? '4rpx 36rpx 0 36rpx' : '30rpx 36rpx 0 36rpx'}">
            <!-- 图片展示 -->
            <view v-if="showImage" class="img">
              <!-- 是否使用后端流处理图片 -->
              <image v-if="imageApi" class="image" :src="imagePath ? imagePath: '/static/imag' +'e/pco/cs.png'" mode="aspectFill"></image>
              <image v-else class="image" :src="imagePath ? imgMinioPath + imagePath: '/static/image/pco/cs.png'" mode="aspectFill"></image>
              <!-- 图片标签 -->
              <view v-if="showWarnTag || imageTag">
                <view v-if="showWarnTag">
                  <view class="stateTag">
                    <image class="icon" src="/static/image/pco/warn.png"></image>
                  </view>
                  <view v-if="imageTag " class="stateTag" style="left: 75rpx">
                    <view>{{ imageTag ? imageTag : '--' }}</view>
                  </view>
                </view>
                <view v-else>
                  <view v-if="imageTag" class="stateTag">{{ imageTag ? imageTag : '--' }}</view>
                </view>
              </view>
              <!-- 图片状态 -->
              <view v-if="imageState" class="bottom-tag" :class="getImageStateClass(imageStateColor)">
                {{ imageState ? imageState : '--' }}
              </view>
            </view>
            <!-- 列表内容 -->
            <view class="content-box" :style="{width: showImage ? 'calc(100vw - 310rpx)' : '100vw'}">
              <view v-if="title" class="title">
                <view>{{ title ? title : '--' }}</view>
              </view>
              <view class="flex-box" v-for="(item, index) in dataList" :key="index" :style="{ padding: dataList.length === 2 ? '10rpx 0' : '5rpx 0' }">
                <view class="flex-box-label">{{ item.label }}</view>
                <view class="flex-box-value" :class="colorRendering && colorRendering.row.includes(index + 1) ? getColorClass(colorRendering.class)  : 'value-info'">
                  {{ item.value }}
                </view>
              </view>
            </view>
          </view>
          <!-- 底部工具 -->
          <view v-if="showCheckBox || showButton" class="bottom-tool">
            <!-- 复选 -->
            <view v-if="showCheckBox" class="check-box">
              <uv-checkbox-group v-model="checkboxValue">
                <uv-checkbox :key="rowId" @change="onCheckboxChange(rowId)" :disabled="checkboxDisabled"></uv-checkbox>
              </uv-checkbox-group>
            </view>
            <!-- 按钮 -->
            <view v-if="showButton" class="button-box">
              <slot name="button"></slot>
            </view>
          </view>
        </view>
      </uv-swipe-action-item>
    </uv-swipe-action>
  </view>
</template>

<script setup>
  import {ref} from "vue";
  import config from '@/common/config';

  let imgMinioPath = ref(config.IMG_MINIO_PATH);
  let emits = defineEmits(['handleView', 'handleSwipe', 'onCheckboxChange']);

  let props = defineProps({
    rowId: {
      type: String,
      default: ''
    },
    // 滑动模块
    swipeOptions: {
      type: Array,
      default: [{
        text: '删除',
        style: {
          backgroundColor: '#FFFFFF',
          padding: '0 20px'
        }
      }]
    },
    swipeDisabled: {
      type: Boolean,
      default: true
    },
    // 顶部提示
    topTip: {
      type: String,
      default: ''
    },
    // 三角状态
    deltaState: {
      type: String,
      default: ''
    },
    deltaStateColor: {
      type: String,
      default: 'info'
    },
    // 图片展示
    showImage: {
      type: Boolean,
      default: true
    },
    imageApi: {
      type: Boolean,
      default: false
    },
    imagePath: {
      type: String,
      default: ''
    },
    showWarnTag: {
      type: Boolean,
      default: false
    },
    imageTag: {
      type: String,
      default: ''
    },
    imageState: {
      type: String,
      default: ''
    },
    imageStateColor: {
      type: String,
      default: 'green'
    },
    // 列表内容
    title: {
      type: String,
      default: ''
    },
    labelList: {
      type: Array,
      default: () => []
    },
    valueList: {
      type: Array,
      default: () => []
    },
    colorRendering: {
      type: Object,
      default: () => {}
    },
    // 复选框
    showCheckBox: {
      type: Boolean,
      default: false
    },
    checkboxDisabled: {
      type: Boolean,
      default: false
    },
    showButton: {
      type: Boolean,
      default: true
    },
  });

  let dataList = ref([]);
  let checkboxValue = ref([]);

  // 初始化
  let init = () => {
    initDataList();
    initSwipeClass();
  };

  // 初始化数据列表
  let initDataList = () => {
    const maxLength = Math.max(props.labelList.length, props.valueList.length);
    for (let i = 0; i < maxLength; i++) {
      const label = (i < props.labelList.length) ? props.labelList[i] : '--';
      const value = (i < props.valueList.length) ? props.valueList[i] : '--';
      dataList.value.push({label: label, value: value});
    }
  }

  /** 点击卡片 */
  let handleCard = () => {
    emits('handleCard', props.rowId);
  };

  /** 滑动模块 */
  let handleSwipe = () => {
    emits('handleSwipe', props.rowId);
  };

  /** 复选 */
  let onCheckboxChange = (e) => {
    emits('onCheckboxChange', e);
  };

  /** 样式部分 */
  // 获取三角状态背景颜色样式
  function getBackgroundClass(color) {
    switch (color) {
      case 'green':
        return 'background-green';
      case 'yellow':
        return 'background-yellow';
      case 'blue':
        return 'background-blue';
      case 'info':
        return 'background-info';
    }
  }

  // 获取图片状态文字颜色样式
  function getImageStateClass(color) {
    switch (color) {
      case 'green':
        return 'image-state-green';
      case 'yellow':
        return 'image-state-yellow';
      case 'red':
        return 'image-state-red';
    }
  }

  // 获取文字颜色样式
  function getColorClass(color) {
    switch (color) {
      case 'green':
        return 'color-green';
      case 'yellow':
        return 'color-yellow';
      case 'red':
        return 'color-red';
      case 'blue':
        return 'color-blue';
    }
  }

  // 初始化滑动模块样式
  let initSwipeClass = () => {
    if (!props.swipeDisabled && props.swipeOptions[0].style.backgroundColor === '#FFFFFF') {
      props.swipeOptions[0].style.backgroundColor = '#F53F3F';
    }
  }

  init();
</script>

<style scoped lang="scss">
  .list-all {
    background: #ffffff;
    border-radius: 16rpx;
    margin-bottom: 24rpx;
  }

  .main-list {
    margin-bottom: 24rpx;
    position: relative;
  }

  .s-top-warn{
    padding: 16rpx 20rpx;
    height: 60rpx;
    font-size: 20rpx;
    font-weight: normal;
    color: #D81E06;
    display: flex;
    align-items: center;

    image{
      width: 28rpx;
      height: 28rpx;
      margin-right: 10rpx;
    }
  }

  .full-width{
    flex:1;
    display: flex;
    margin-bottom: 5rpx;
    .text{
      color: #3D3D3D;
      font-size: 32rpx;
    }
  }

  .state-main{
    width: 60rpx;
    height: 60rpx;
    border-top-right-radius: 16rpx;
    overflow: hidden;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 11;

    .state{
      width: 0;
      height: 0;
      border-top: 60rpx solid #3375F6;
      border-left: 60rpx solid transparent;
    }

    .background-yellow {
      border-top: 60rpx solid #FF981B;
    }
    .background-green {
      border-top: 60rpx solid #3FBE00;
    }
    .background-info {
      border-top: 60rpx solid #3375F6;
    }
    .background-info {
      border-top: 60rpx solid #C8C8C8;
    }

    .state-text{
      width: 60rpx;
      height: 60rpx;
      position: absolute;
      right: 0;
      top: 0;
      z-index: 22;
      color: #fff;
      transform: rotate(45deg);
      font-size: 22rpx;
      text-align: center;
      font-weight:500;
      padding-top: 3rpx;
    }

  }

  .list-all-main{
    display: flex;
    justify-content: flex-start;
  }

  .list-all-main .img {
    width: 180rpx;
    height: 100%;
    position: relative;
    display: inline-block;
    border-radius: 10rpx;

    .image {
      display: block;
      width: 180rpx;
      height: 180rpx;
      border-radius: 10rpx;
    }

    .stateTag {
      top: 0;
      left: 0;
      color: #ffffff;
      width: 72rpx;
      height: 48rpx;
      font-size: 24rpx;
      position: absolute;
      line-height: 48rpx;
      text-align: center;
      border-radius: 10rpx 0 10rpx 0;
      background-color: rgba(245, 108, 108, 0.47);

      .icon {
        width: 30rpx;
        height: 30rpx;
        margin-top: 5rpx;
      }
    }

    .bottom-tag {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 5px;
      background-color: rgba(0, 0, 0, 0.3);
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 0 0 10rpx 10rpx;

      height: 40rpx;
      text-align: center;
      line-height: 20px;
      font-size: 24rpx;
    }

  }

  .list-all-main .content-box {
    margin-left: 22rpx;
    padding: 5rpx 0;

    .title {
      word-break: break-word;
      font-size: 32rpx;
      font-weight: bold;
      color: #3D3D3D;
      margin-bottom: 10rpx;
    }

    .flex-box {
      padding: 5rpx 0;
      font-size: 28rpx;
      display: flex;
      justify-content: space-between;

      .flex-box-label {
        width: 40%;
        color: #8B8B8B;
      }

      .flex-box-value {
        width: 60%;
        text-align: right;
        color: #3D3D3D;

        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }

  .bottom-tool {
    margin: 0 36rpx;
    display: flex;
    justify-content: space-between;

    .check-box {
      width: 5%;
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
    }

    .button-box {
      width: 100%;
      padding-top: 8rpx !important;
      padding-bottom: 0 !important;
    }

  }



  .image-state-red {
    color: #EB5555;
  }
  .image-state-yellow {
    color: #EB7107;
  }
  .image-state-green {
    color: #55EB78;
  }

  .color-red {
    color: #FF0000;
  }
  .color-yellow {
    color: #FF981B;
  }
  .color-green {
    color: #3FBE00;
  }
  .color-blue {
    color: #3375F6;
  }
  .color-info {
    color: #3D3D3D;
  }

</style>